<script setup lang="ts">
import {ref} from 'vue'
interface Props{
  title?:string,
  content?:string,
  showCancelBtn?:boolean,
  comfirm?:() =>void,
  cancel?:() =>void,
}
const props=withDefaults(defineProps<Props>(),{
  title:'提示',
  content:'内容',
  showCancelBtn:true,
  comfirm :() =>{},
  cancel :() =>{}
})
</script>

<template>
  <div
    w:w="screen"
    w:h="screen"
    w:pos="absolute top-0 left-0"
    w:bg="black opacity-50"
    w:flex="~ nowrap"
    w:align="items-center"
    w:justify="center"
  >
    <div
      w:bg="white"
      w:border="rounded-4xl"
      w:w="160"
    >
      <div
        w:text="center"
        w:m="t-8"
        w:font="bold"
      >{{props.title}}</div>
      <div
        w:m="x-8 y-8"
      >{{props.content}}</div>
      <div
        w:flex="~ nowrap"
        w:align="items-stretch"
        w:justify="around"
        w:border="t-2 solid gray"
      >
        <div v-if="props.showCancelBtn" @click="props.cancel"
          w:flex="1"
          w:text="center"
          w:p="y-8"
          w:font="bold"
          w:border="r-2 solid gray"
        >取消</div>
        <div @click="props.comfirm"
          w:flex="1"
          w:text="center blue-500"
          w:p="y-8"
          w:font="bold"
        >确认</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>